<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>失去焦点事件onblur</title>
    <script type="text/javascript">

      //静态绑定
      function upperCase() {
        //1.得到输入框的value
        var fname = document.getElementById("fname");
        //2.转成大写重新赋值
        fname.value = fname.value.toUpperCase();
      }

      //在页面加载完毕，完成动态绑定
      window.onload = function() {
        //1.得到输入框的value
        var fname2 = document.getElementById("fname2");
        //2.绑定fname2的失去焦点事件
        fname2.onblur = function () {
          fname2.value = fname2.value.toUpperCase();
        }
      }
    </script>
  </head>
  <body>
  输入英文单词：
  <input type="text" id="fname" onblur="upperCase()"><br/>
  输入英文单词：
  <input type="text" id="fname2"><br/>
  </body>
</html>